<template>
	<view class="shenye-market">
        <view class="market_info" v-if="isExchange">
            <view class="bx_b">
                <image class="bg" src="../../../static/my/if_card.png" mode=""></image>
                <view class="con_Box">
                    <view class="con_tit">限时兑换神椰CoCo</view>
                    <view class="con_text">
                        <view class="list">
                            <text class="lable">当前兑换比例：</text>
                            <text class="val"> {{cocoData.exchangeRatio}}通分 : 1CoCo</text>
                        </view>
                        <view class="list">
                            <text class="lable">剩余可兑换数量：</text>
                            <text class="val">{{cocoData.exchangeSurplusNum}}</text>
                        </view>
                        <view class="listTime">
                            <view class="top">兑换时间：</view>
                            <view class="val">{{cocoData.exchangeTimeStart}} 至 {{cocoData.exchangeTimeEnd}}</view>
                        </view>
                        <view class="tk_b" v-if="loginStatus">
                            <view class="lf_t">
                                <text>可用通分：</text>
                                <text>{{cocoData.tfAmount}}</text>
                            </view>
                            <view class="rg_b" @click="handleTimeEx(cocoData.id)">立即兑换</view>
                        </view>
                        <view class="tk_b" v-else>
                            <view class="lf_t">
                                <text>可用通分：</text>
                                <text class="hua">登录查看 ></text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
		<view class="market_fi">
			<view style="width: 100%;">
				<scroll-view scroll-x="true" class="scroll_view">
					<view class="market_nav">
						<view class="market_item" :class="{'on':navIndex == index}" v-for="(item,index) in navList" @click="clickIten(item,index)">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
			<view class="record">
				<navigator hover-class="none" url="./exchange-record/exchange-record" >
					<text>我的兑换记录</text>
					<image src="/static/newsImg/my_right01.png" mode=""></image>
				</navigator>
			</view>

		</view>
		<view class="product_list" v-if="dataList.length!=0">
			<view class="product_list_item" v-for="(item,index) in dataList" :key="index" @click="jumpDetails(item)">
				<view class="list_item_img">
					<image class="img_bg" :src="item.img" mode="aspectFill"></image>
					<view class="sold_out" v-if="item.surplusStock == 0">已售罄</view>
				</view>
				<view class="list_item_title ellipseHide">{{item.name}}</view>
				<view class="list_item_coco">
					<image src="/static/newsImg/shenye_cion01.png" mode="" v-if="item.priceType == 1"></image>
                    <image src="/static/newsImg/shenye_cion02.png" mode="" v-if="item.priceType == 2"></image>
					<text>{{item.price}} {{item.priceTypeDict}} </text>
				</view>
				<view class="stock">库存：{{item.surplusStock}}</view>
			</view>
		</view>
		<block v-else>
			<view class="no_info">
				<image src="/static/my/news_no.png" mode="widthFix"></image>
				<text>暂无商品</text>
			</view>
		</block>
		<view class="shenye_footer">
			<view class="footer_item" @click="jump(1)" >
				<image src="/static/home.png" mode=""></image>
				<text>返回首页</text>
			</view>
			<view class="footer_item" @click="jump(2)">
				<image src="/static/my.png" mode="" ></image>
				<text>我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCommodityList } from '@/api/api-v1-2.js'
	export default {
		data() {
			return {
				navIndex:0,
				navList:[
					{id:1,name:'全部',type:0},
					{id:2,name:'实物奖品',type:1},
					{id:3,name:'NFR',type:2},
					{id:4,name:'线上权益',type:3},
					{id:5,name:'盲盒优惠券',type:5},
				],
				dataList: [],
				pageSize: 10, //每页记录数
				pageNum: 1, //当前页码
				listTotal: 0, //列表总数
                cocoData: {},
                loginStatus: false,
                isExchange: false,
			}
		},
        onLoad(){
            
        },
		onShow() {
            if (this.$queue.getData('token') == undefined) {
            	this.loginStatus = false
            }else{
            	this.loginStatus = true
            }
			this.getDataList()
            this.getCocoDetail()
			this.initialization()
			// this.getDataList()

		},
		methods: {
           
			// 初始化参数
			initialization(){
				this.pageNum = 1
				this.listTotal = 0
				this.dataList = []
				this.getDataList()
			},
            async getCocoDetail(){
                const res = await this.$api.getIntegralCoco();
                if(JSON.stringify(res.result) != '{}'){
                    this.cocoData = res.result
                    this.cocoData.exchangeTimeStart = res.result.exchangeTimeStart + ":00"
                    this.cocoData.exchangeTimeEnd = res.result.exchangeTimeEnd + ":00"
                    this.isExchange = true
                }else{
                    this.isExchange = false
                }
                
                
            },
			async getDataList() {
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				var _this = this
				let data = {
					pageSize: this.pageSize,
					pageNum: this.pageNum,
				}
				if(this.navIndex != 0 ){
					data.type = this.navList[this.navIndex].type
				}
				try {
					const res = await getCommodityList(data);
					uni.hideLoading()
					this.listTotal = res.result.total
					var el = res.result.records
					if (this.pageNum > 1) {
						this.dataList = this.dataList.concat(el); //将数据拼接在一起
					} else {
						this.dataList = el
					}
				} catch {
					uni.hideLoading()
				} finally {
					setTimeout(res => {
						uni.hideLoading()
					}, 4000)
				}
			},
			clickIten(item,index){
				this.navIndex = index
				this.initialization()
			},
			jumpDetails(el){
				uni.navigateTo({
					url:'/pages/my/shenye-market/commodity-details/commodity-details?id='+el.id
				})
			},
			jump(index){
				if(index == 1){
					uni.reLaunch({
						url:'/pages/index/index'
					})
				}else{
					uni.reLaunch({
						url:'/pages/my/my'
					})
				}
			},
            handleTimeEx(id){
                uni.navigateTo({
                    url:'/pages/my/timeExchange/timeExchange?id='+id
                })
            },
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			// console.log("触底了", this.pageNum, Math.ceil(this.listTotal / this.pageSize), this.listTotal)
			if (this.pageNum >= Math.ceil(this.listTotal / this.pageSize)) {
				// this.moreShop = 'noMore'
			} else {
				// this.moreShop = 'more'
				this.pageNum++; //每触底一次 page + 1;
				this.getDataList()
			}
		},
        
	}
</script>

<style scoped>
	page{
		background: #F5F5F5;
	}
	.shenye-market{
		padding-bottom: 200rpx;
		/* padding-top: 220rpx; */
	}
    .market_info{
        background: #fff;
        width: 100%;
        height: 474rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
    }
    .market_info .bx_b{
        position: relative;
        width: 690rpx;
        height: 444rpx;
        margin-top: 22rpx;
    }
    .market_info .bg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100;
    }
    .con_Box{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .con_tit{
        width: 100%;
        height: 74rpx;
        line-height: 74rpx;
        font-size: 32rpx;
        color: #fff;
        text-align: center;
    }
    .con_text{
        padding: 40rpx;
    }
    .con_text .list{
      display: flex; 
        justify-content: flex-start;
        align-items: center;
        margin-top: 14rpx;
    }
    .con_text .list .lable{
        font-size: 30rpx;
        color: #222;
    }
    .con_text .list .val{
        font-size: 32rpx;
        color: #AF5D2E;
    }
    .listTime{
       margin-top: 14rpx; 
       font-size: 28rpx;
       color: #222;
    }
    .listTime .top{
        
    }
    .listTime .val{
        
    }
    .tk_b{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 26rpx;
       
    }
    .tk_b .lf_t {
        display: flex;
        align-items: center;
    }
    .tk_b .lf_t text:nth-child(1){
        font-size: 28rpx;
        color: #222;
    }
    .tk_b .lf_t text:nth-child(2){
        font-size: 40rpx;
        font-weight: 500;
        color: #AF5D2E;
    }
    .tk_b .rg_b{
        width: 176rpx;
        text-align: center;
        height: 64rpx;
        line-height: 64rpx;
        color: #fff;
        background: #FF4219;
        border-radius: 100px;
    }
    .tk_b .lf_t .hua{
        color: #AF5D2E;
        text-decoration:underline;
        font-size: 30rpx !important;
    }
	.market_fi{
	/* 	position: fixed;
		top: 0;
		left: 0; */
		z-index: 55;
	}
	.scroll_view {
		width: 100%;
		white-space: nowrap;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: #fff;
	}
	
	/deep/ .scroll_view ::-webkit-scrollbar {
		display: none;
	}
	.market_nav{
		/* width: 750rpx; */
		width: 100%;
		height: 128rpx;
		background: #ffffff;
		/* padding: 0 40rpx; */
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	.market_nav .on{
		font-size: 40rpx !important;
		color: #222222 !important;
        font-weight: 500;
		background-image: url('@/static/index/index-yuan.png');
		background-repeat: no-repeat;
		background-size: 48rpx 42rpx;
		background-position: 4px 30rpx;
	}
	.market_item{
		height: 128rpx;
		line-height: 128rpx;
		padding: 0 20rpx;
		font-size: 34rpx;
		color: rgba(51, 51, 51, .8);
	}
	.record{
		background: #F5F5F5;
		width: 100%;
		padding: 26rpx 30rpx;
		font-size: 30rpx;
		color: #222222;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
	.record image{
		width: 12rpx;
		height: 18rpx;
		margin-left: 8rpx;
	}
	/* 列表 */
	.product_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
/* 		column-count: 2;
		column-gap: 30rpx; */
		
	}
	.product_list_item{
		/* break-inside: avoid-column; */
		width: 330rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 30rpx;
		/* display: inline-block; */
	}
	.list_item_img{
		position: relative;
		width: 290rpx;
		height: 262rpx;
		overflow: hidden;
		border-radius: 12rpx;
		background: #ffffff;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.img_bg{
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
	}
	.sold_out{
		position: absolute;
		z-index: 2;
		width: 142rpx;
		height: 142rpx;
		border-radius: 50%;
		line-height: 142rpx;
		text-align: center;
		color: #ffffff;
		background: rgba(0, 0, 0, 0.5);
	}
	.list_item_title{
		width: 100%;
		font-size: 30rpx;
		line-height: 44rpx;
		color: #222222;
		margin-bottom: 8rpx;
	}
	.list_item_coco{
		font-size: 30rpx;
		color: #FF1919;
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list_item_coco image{
		width: 30rpx;
		height: 30rpx;
		margin-right: 14rpx;
	}
	.stock{
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #666666;
	}
	/* footer */
	.shenye_footer{
		position: fixed;
		bottom: 0;
		z-index: 10;
		display: flex;
		flex-direction: row;
		justify-content: center;
		background: #ffffff;
		width: 100%;
		height: 148rpx;
	}
	.footer_item{
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #4D4D4D;
		text-align: center;
		margin-top: 20rpx;
	}
	.footer_item:first-child{
		margin-right: 236rpx;
	}
	.footer_item image{
		width: 44rpx;
		height: 44rpx;
		margin-bottom: 10rpx;
	}
</style>
